function getTxtLenght(val) {
  let arr = val.match(/[\u4e00-\u9fa5]/g)
  let chinaLength = arr ? arr.length : 0
  let englishLength = val.length - chinaLength
  return Math.floor(chinaLength + englishLength / 2)
}

function getMaxNum(data) {
  let arr = data
  if (data[0] && data[0].value) {
    arr = []
    data.map(item => {
      arr.push(item.value)
    })
  }
  return Math.max.apply(null, arr)
}

let commonTooltipStyle = {
  trigger: 'axis',
  padding: [8, 12, 8, 12],
  textStyle: {
    color: '#666'
  },
  borderWidth: 1,
  borderColor: '#dedede',
  backgroundColor: '#fff',
  extraCssText: 'box-shadow: 4px 4px 8px 0px rgba(6, 15, 53, 0.1);'
}

export const LineBarChart = {
  drawBar(id, datas = {}) {
    let echarts = window.echarts
    let myChart = echarts.init(document.getElementById(id))
    let chartType = datas.chartType || '0'
    let legendData = []
    let xAxisData = datas.xAxisData || []
    let seriesData = datas.seriesData || []
    let length = seriesData.length
    let colors = [{startColor: '#419cf0', endColor: '#5aafff'}, {startColor: '#00bcc3', endColor: '#47d6e7'}]
    let series = []
    let max = 0
    seriesData.map((it, index) => {
      let item = {
        name: it.name,
        type: 'bar',
        data: it.data,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [
                {offset: 0, color: colors[index].startColor},
                {offset: 1, color: colors[index].startColor}
              ]
            )
          }
        }
      }
      let num = getMaxNum(it.data)
      if (num > max) {
        max = num
      }
      if (length === 1) {
        item.barWidth = 20
        item.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [
                {offset: 0, color: '#20aeff'},
                {offset: 1, color: '#17a1ef'}
              ]
            )
          }
        }

      }
      legendData.push(it.name)
      series.push(item)
    })
    if (series.length !== 0) {
      series[length - 1].markArea = {silent: true,
        itemStyle: {
          normal: {
            color: '#f3f8ff'
          }
        },
        data: [[
          {
            y: '40'
          },
          {
            y: '80'
          }
        ], [
          {
            y: '120'
          },
          {
            y: '160'
          }
        ], [
          {
            y: '200'
          },
          {
            y: '240'
          }
        ]]
      }
    }

    let commonStyle = {
      axisLine: {
        lineStyle: {
          color: '#c7e0f7',
          width: 2
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }

    let option = {
      tooltip: {
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(24,144,239,.1)'
          }
        },
        ...commonTooltipStyle
      },
      legend: {
        data: legendData,
        itemWidth: 4,
        itemHeight: 4,
        right: 30,
        textStyle: {
          color: '#666'
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: '#6a6a6a',
            fontSize: 14
          },
          ...commonStyle
        },
        {
          type: 'value',
          ...commonStyle
        }
      ],
      series: series
    }
    /**
     * 类目轴,以26个中文字为界限,未超出:axisLabel-interval:0,单个标签超出8个中文字,截取;
     * 超出::axisLabel-interval:'auto',单个标签以4个中文字,截取
     */
    let referNum = 26
    let sum = 0
    xAxisData.map((item) => {
      sum += getTxtLenght(item)
    })
    let isNeedSub = sum > referNum

    option.grid = {top: 40,
      left: 30,
      right: 30,
      bottom: 20,
      containLabel: true}
    option.xAxis = [{
      type: 'category',
      data: xAxisData,
      axisLabel: {
        show: true,
        interval: !isNeedSub ? 0 : 'auto',
        color: '#6a6a6a',
        fontSize: 14,
        formatter(val) {
          let subIndex = 5
          if (!isNeedSub) {
            subIndex = 8
          }
          let length = getTxtLenght(val)
          if (length > subIndex) {
            // return val.substring(0, length) + '\n' + val.substring(length, val.length)
            return val.substring(0, subIndex) + '...'
          } else {
            return val
          }
        }
      },
      ...commonStyle
    }]
    if (chartType === '1') {
      option.tooltip.formatter = '{b}:\t{c}'
      option.title = {
        text: datas.title,
        x: 'center',
        textStyle: {
          color: '#333',
          fontSize: 14,
          fontFamily: 'MicrosoftYaHei'
        }
      }
      option.legend.show = false
      option.grid = {
        top: 40,
        left: 30,
        right: 30,
        bottom: 30,
        containLabel: true}
      option.xAxis[0].axisLabel.show = true
      option.xAxis[0].interval = 0
      if (series.length !== 0) {
        series[length - 1].markArea.data = [[
          {
            y: '40'
          },
          {
            y: '85.6'
          }
        ], [
          {
            y: '131.2'
          },
          {
            y: '176.8'
          }
        ], [
          {
            y: '222.4'
          },
          {
            y: '268'
          }
        ]]
      }

      if (option.series[0] && option.series[0].data.length > 20) {
        option.dataZoom = [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 50,
            left: 100,
            right: 70,
            height: 10,
            bottom: 12,
            fillerColor: '#f3f8ff'
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 50
          }
        ]
      }
    }

    if (max <= 1) {
      option.yAxis[0].max = 10
    }

    myChart.clear()
    myChart.setOption(option)
  },
  drawLine(id, datas = {}) {
    let echarts = window.echarts
    let myChart = echarts.init(document.getElementById(id))
    let xAxisData = datas.xAxisData || []
    let commonStyle = {
      axisLine: {
        lineStyle: {
          color: '#cccccc'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#6a6a6a'
      }
    }

    let seriesData = datas.seriesData || []
    let series = []
    seriesData.map((it, index) => {
      let item = {
        type: 'line',
        symbolSize: 8,
        smooth: true,
        data: it.data,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 1,
            color: 'rgba(53,167,255,0.48)'
          }, {
            offset: 0.83,
            color: 'rgba(112,181,254,0.39)'
          }, {
            offset: 0.52,
            color: 'rgba(134,186,253,0.24)'
          }, {
            offset: 0,
            color: 'rgba(171,194,252,0)'
          }])
        }
      }
      series.push(item)
    })

    let option = {
      color: '#649eff',
      tooltip: {
        show: true,
        formatter: function(params) {
          return params[0].name + '<br/>' + '数据量' + '<span style="color:#fd7e23;font-size:18px">' + params[0].value + '</span>个'
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            width: 2,
            color: '#ffd4b5'
          },
          shadowStyle: {
            color: 'rgba(24,144,239,.1)'
          }
        },
        ...commonTooltipStyle
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: xAxisData,
        ...commonStyle
      },
      yAxis: {
        type: 'value',
        name: '数量（个）',
        nameTextStyle: {
          color: '#6a6a6a'
        },
        splitLine: {
          lineStyle: {
            color: ['rgba(204,204,204,.2)']
          }
        },
        ...commonStyle
      },
      grid: {
        containLabel: true,
        left: 20,
        right: 20,
        bottom: 0,
        top: 30
      },
      series: series
    }

    myChart.clear()
    myChart.setOption(option)
  }
}



// WEBPACK FOOTER //
// ./src/assets/js/chart/lineBarChart.js